<script setup lang="ts" name="Playground">
import { ref } from 'vue'
import Son from './components/Son.vue'
import Demo from './components/Demo.vue'
const money = ref(100)
</script>

<template>
  <!-- 专门用于测试不稳定的代码 -->
  <div>演练场</div>
  <hr />
  <!-- 
    vue2中可以利用.sync修饰符 去简化子传父;  :money.sync="money"
    vue3中换成了v-model 去简化子传父  v-model:money="money"

    原理: 相当于帮你在内部注册了一个事件 @update:money="money = 值"

    -----------------------------------------------------------

    vue2中也有v-model 直接用在组件上的那种 <Demo v-model="money"></Demo>
    相当于做了两件事 <Demo :value="money" @input="money = 值"></Demo>
    ===>>> 简化子传父

    vue3中v-model 其实也有升级  <Demo v-model="money"></Demo>
    相当于做了两件式 <Demo :modelValue="money" @update:modelValue="money = 值"></Demo>
    ===>>> 简化子传父
   -->
  <Son v-model:money="money"></Son>

  <hr />
  <Demo v-model="money"></Demo>
</template>

<style scoped></style>
